<template>
  <div class="person">
    <h1>水位到达80cm或者水温到60℃给服务器发送请求</h1>
    <h2>水位{{ height }}cm</h2>
    <h2>温度{{ temp }}℃</h2>
    <button @click="changeHeight">增加水位</button>
    <button @click="changeTemp">增加温度</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'

//数据
let height = ref(0)
let temp = ref(10)

// 方法
function changeHeight() {
  height.value += 10;
}
function changeTemp() {
  temp.value += 10
}

//监听器 watch
/* watch([height, temp], (value) => {
  //数组解构取值
  const [newHeight, newTemp] = value
  if(newHeight >= 80 || newTemp >= 60){
    console.log("发送请求给服务器")
  }
}) */

//监听器 watchEffect
watchEffect(()=>{
  if(height.value >= 80 || temp.value >= 60){
    console.log("发送请求给服务器")
  }
})

</script>

<style scoped>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>